<template>
  <!-- vue3页面 -->

  <div style="width: 100%; height: 100%; padding: 5px">
    <div class="main">
      <a-card style="border-radius: 10px" :bodyStyle="{ padding: '15px' }">
        <template #title>
          <div style="width: 100%; text-align: center">报销申请</div>
        </template>
        <a-form
          :model="formState"
          name="basic"
          :label-col="{ style: { width: '100px' } }"
          autocomplete="off"
          @finish="onFinish"
        >
          <a-row>
            <a-col :span="12">
              <a-form-item label="经办人" name="username">
                <a-input disabled placeholder="是呆龙没错了" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="工号" name="workNo">
                <a-input disabled placeholder="ThinkSoft" /> </a-form-item
            ></a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item
                label="报销项目"
                name="item"
                :rules="[{ required: true, message: '请填写报销项目' }]"
              >
                <a-input
                  v-model:value="formState.item"
                  allowClear
                  placeholder="请填写报销项目"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="费用科目"
                name="subject"
                :rules="[{ required: true, message: '请选择费用科目' }]"
              >
                <MySelect
                  v-model:value="formState.subject"
                  :selectData="select"
                  :radius="true"
                  title="请选择费用科目"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item
                label="经费来源"
                name="fundsSource"
                :rules="[{ required: true, message: '请选择经费来源' }]"
              >
                <MySelect
                  v-model:value="formState.fundsSource"
                  :selectData="select"
                  title="请选择经费来源"
                  :radius="true"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="经费余额" name="username">
                <a-input placeholder="99999" disabled /> </a-form-item
            ></a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="报销单位" name="username">
                <a-input placeholder="足球协会" disabled />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="联系人" name="username">
                <a-input placeholder="ThinkSoft" disabled />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="电话" name="username">
                <a-input placeholder="19623291472" disabled />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="报销金额"
                name="ReimbursementAmount"
                :rules="[
                  { required: true, type: 'number', message: '请输入报销金额' },
                ]"
              >
                <a-input-number
                  v-model:value="formState.ReimbursementAmount"
                  placeholder="请输入报销金额"
                  style="width: 100%"
                  :controls="false"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item
                label="发票张数"
                name="invoiceQuantity"
                :rules="[
                  { required: true, type: 'number', message: '请输入发票张数' },
                ]"
              >
                <a-input-number
                  v-model:value="formState.invoiceQuantity"
                  placeholder="请输入发票张数"
                  style="width: 100%"
                  :controls="false"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="发票号码"
                name="invoiceNumber"
                :rules="[
                  { required: true, type: 'number', message: '请输入发票号码' },
                ]"
              >
                <a-input-number
                  v-model:value="formState.invoiceNumber"
                  placeholder="请输入发票号码"
                  style="width: 100%"
                  :controls="false"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="结算方式" name="type">
                <a-radio-group v-model:value="formState.type">
                  <a-radio-button :value="0">对公转账</a-radio-button>
                  <a-radio-button :value="1">对个人转账</a-radio-button>
                  <a-radio-button :value="2">现金</a-radio-button>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="户名"
                name="username"
                :rules="[{ required: true, message: '请输入户名' }]"
              >
                <a-input
                  v-model:value="formState.username"
                  placeholder="请输入户名"
                /> </a-form-item
            ></a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item
                label="账号"
                name="accountNumber"
                :rules="[{ required: true, message: '请输入账号' }]"
              >
                <a-input
                  v-model:value="formState.accountNumber"
                  placeholder="请输入账号"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="开户行"
                name="bankOfDeposit"
                :rules="[{ required: true, message: '请输入开户行' }]"
              >
                <a-input
                  v-model:value="formState.bankOfDeposit"
                  placeholder="请输入开户行"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="费用来源" name="source">
                <a-radio-group v-model:value="formState.source">
                  <a-radio-button :value="1">通用经费</a-radio-button>
                  <a-radio-button :value="0">专项经费</a-radio-button>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="通用经费"
                name="commonFunds"
                v-if="formState.source"
                :rules="[{ required: true, message: '请选择通用经费' }]"
              >
                <a-radio-group v-model:value="formState.commonFunds">
                  <a-radio-button :value="0">对公转账</a-radio-button>
                  <a-radio-button :value="1">对个人转账</a-radio-button>
                  <a-radio-button :value="2">现金</a-radio-button>
                </a-radio-group>
              </a-form-item>
              <a-form-item
                label="专项经费"
                name="specialFund"
                v-else
                :rules="[{ required: true, message: '请选择专项经费' }]"
              >
                <MySelect
                  v-model:value="formState.specialFund"
                  :selectData="select"
                  title="请选择专项经费"
                  :radius="true"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item>
                <div
                  style="
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    margin-top: 30px;
                  "
                >
                  <a-button style="width: 20%; margin: 0 20px">重置</a-button>
                  <a-button
                    style="width: 20%; margin: 0 20px"
                    type="primary"
                    html-type="submit"
                    >提交</a-button
                  >
                </div>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import MySelect from "@/components/CommonDai/SelectSearch.vue";
const formState = ref({
  // username: "",
  // workNo: "",
  item: "",
  subject: "",
  fundsSource: undefined,
  // balance:'',
  // unit:'',
  // person:'',
  // phone:'',
  ReimbursementAmount: undefined,
  invoiceQuantity: undefined,
  invoiceNumber: undefined,
  type: 0,
  username: "",
  accountNumber: "",
  bankOfDeposit: "",
  source: 0,
  commonFunds: undefined,
  specialFund: undefined,
});
const select = [
  {
    title: "测试1",
    value: "测试1",
  },
  {
    title: "测试2",
    value: "测试2",
  },
];
const onFinish = (values: typeof formState.value) => {
  console.log(values);
};
</script>

<style scoped lang="less">
.main {
  width: 100%;
  overflow: auto;
}
:deep(.ant-radio-button-wrapper) {
  margin-right: 20px;
  border-radius: 6px;
  border-left-width: 1px;

  &::before {
    display: none;
  }
}
:deep(.ant-input-number),
:deep(.ant-input-affix-wrapper),
:deep(.ant-input),
:deep(.ant-select-selector) {
  border-radius: 6px;
}
:deep(.ant-btn) {
  border-radius: 6px;
}
</style>
